<template>
  <edu-mescroll-uni @init="mescrollInit" @down="refresh" @up="reachBottom">
    <view class="page-box">
      <view class="teach-view">
        <view
          class="item"
          v-for="item in teachList"
          :key="item.id"
          @click="
            $u.route('pageCourse/course/details', {
              id: item.id,
            })
          "
        >
          <courseImage
            width="307"
            height="172"
            :image="item.cover_url"
            :courseType="item.course_type"
            :courseTypeText="item.course_type_text"
          ></courseImage>
          <view class="content">
            <view class="title u-line-2">{{ item.title }}</view>
          </view>
        </view>
      </view>
    </view>
  </edu-mescroll-uni>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      teachList: [],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    refresh() {
      this.mescroll.resetUpScroll()
    },
    reachBottom(page) {
      this.$edu.api
        .getUserTeacherCourse(this.value, {
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res

          let total = data.total
          let list = data.data

          if (page.num == 1) this.teachList = []
          this.teachList = this.teachList.concat(list)
          this.mescroll.endBySize(list.length, total)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.page-box {
  padding: 0 30rpx;
}
.teach-view {
  .item {
    display: flex;
    margin-top: 32rpx;
    .content {
      flex: 1;
      margin-left: 24rpx;
      .title {
        font-size: 30rpx;
        font-weight: 400;
        color: $edu-main-color;
        height: 80rpx;
        line-height: 40rpx;
      }
    }
  }
}
</style>
